<script setup>
import Password from "@/components/Password.vue";
import Inputter from "@/components/Inputter.vue";
import instance from "@/utils/request.js";
import { ElMessage } from "element-plus";
import { useEmployeeStore } from "@/stores/employee.js";
import router from "@/router/router.js";

/*
    已废弃
*/

// 员工首页
const employee_id = ref("");
const employee_password = ref("");

const employee = useEmployeeStore();

function login() {
  // 登录
  instance.request({
    url: 'employee/index/login',
    method: 'POST',
    data: {
      employee_id: employee_id.value,
      employee_password: employee_password.value
    }
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message:  "登录失败！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_ACCOUNT") {
          ElMessage({
            message:  "工号不存在！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_PASSWORD") {
          ElMessage({
            message:  "工号或密码有误！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          employee.login(employee_id.value, response.data.data);
          router.push("/employee/roomstatus");
        }
      })
      .catch(function(error){
        console.log(error);
        ElMessage({
          message: "登录失败！",
          type: "error"
        });
      });
}
</script>

<template>
  <div class="login">
    <span class="input-text">工号：</span>
    <inputter width="200" v-model="employee_id"/><br><br>

    <span class="input-text">密码：</span>
    <password width="200" v-model="employee_password"/><br><br>

    <el-button  color="#568fc1" class="button-width button-color" @click="login">
      <span>登录</span>
    </el-button>
  </div>
</template>

<style scoped>
.login {
  margin: 10vh;
  height: 50vh;
  /* border: 1px solid black; */
}
.input-text {
  display: inline-block;
  width: 10vh;
  text-align: right;
}
.button-width {
  margin-left: 4vh;
  width: 250px;
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
</style>